<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    

    <!-- 
    事件修饰符
    Vue当中提供的事件修饰符
    .stop 停止事件冒泡 等同于 event。stopPropagation（）
    .prevent 等同于 event.preventDefault（） 阻止事件的默认行为
    .capture 事件的捕获阶段触发
                    添加事件监听器时使用事件捕获模式
                    添加事件监听器包括两种不同的方式
                       一种是从内往外添加 （属于事件冒泡模式）
                       一种是从外到内添加 （时间捕获模式） 

                       没有添加则这个元素以及这个元素的子元素都会使用默认的冒泡模式  3 1 2
    .once 事件只触发一次
    .self  这个事件如果是我元素上发生的事件，这个事件不是别人给我传递过来的事件，则执行对应的程序 
    .passive  翻译为顺从、不抵抗  ，无需等待，直接继续（立即）执行事件的默认行为
                .passive 和 .prevent 修饰符是对立的，不可以共存
                .prevent:阻止事件的默认行为
                .passive: 解除阻止
    
    -->
</head>
<body>
    <div id="app">
        <a href="https://www.baidu.com" @click="dianji">baidu</a>
 
    <br>
    <!-- 
    在Vue当中，事件修饰符是可以多个联合使用的
    但是需要注意，修饰符的顺序是从左到右的
    @click.self.stop  先执行stop，再执行self，最后执行click
    @click.stop.self  先执行stop，再执行self，最后执行click
    -->
    <div @click.capture="san">  //3 1 2
        <div @click.self="er">  //1 3 这个是1传递过来的，不是自身的事件
            <button @click="yi">anniu</button>
        </div>
    </div>

</div>
   
</body>
<script>
    new Vue({
      el: '#app',
      data : {
          
      },
      methods: {
        dianji(event){
           alert("你点击了a标签")
           event.preventDefault();
           console.log(event)

        },
        yi(){
            alert("1")
        },
        er(){
            alert("2")
        },
        san(){
            alert("3")
        }
      },
    })
</script>
</html>